/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import { Image, StatusBar, StyleSheet, TouchableOpacity, View, Text, FlatList, Dimensions } from 'react-native';

import RNCameraRoll from 'react-native-cameraroll';
const { height, width } = Dimensions.get('window');
export default class App extends Component {
	constructor(props) {
		super(props);
		this.state = {
			uris: []
		};
	}

	getPhotos = () => {
		RNCameraRoll.getAssets({ assetType: 'image', limit: 40 })
			.then((response) => {
				console.log(response);
				this.setState({
					uris: response.assets
				});
			})
			.catch((err) => console.error(err));
	};

	renderImages = ({ item }) => {
		const { uri, timestamp } = item;
		return (
			<Image
				source={{ uri }}
				style={{ width: width/2, height: width/2, borderColor: '#F00', borderWidth: 1 }}
				key={timestamp}
			/>
		);
	};

	render() {
		const { uris = [] } = this.state;
		return (
			<View style={styles.container}>
				<StatusBar animated hidden />
				<TouchableOpacity onPress={this.getPhotos} style={styles.btn}>
					<Text>从本地相册导入图片</Text>
				</TouchableOpacity>
				{uris.length > 0 ? (
					<FlatList numColumns={2} data={uris} style={{ flex: 1 }} renderItem={this.renderImages} />
				) : (
					undefined
				)}
			</View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center'
	}
});
